<template>
  <div class="father">
    <div>
      父组件: {{count}}
      <button @click="fn">父组件修改自己的数据</button>
    </div>
    <MySon :aaaa="count" bb="count" @updatexxxx="fn2" />
  </div>
</template>

<script>
import MySon from './components/MySon.vue'
export default {
  components: {
    MySon
  },
  data() {
    return {
      count: 100
    }
  },
  methods: {
    fn() {
      // 父组件该自己的数据，子组件如果使用了父组件的数据，那么会同步更新，这个是vue的机制。因为整个父子组件 count数据就一份
      this.count++
    },
    fn2(val) {
      // console.log(val);
      this.count = val
    }
  }
}
</script>

<style scoped>
.father {
  border: 1px solid red;
  padding: 15px;
}
</style>